<template>
  <div class="page-header-index-wide">
    <a-card
      :title="reportName" :loading="loading"
      :bordered="false"
      style="padding: 10px"
      :body-style="{ padding: '0' }"
    >
      <a-button style="margin: 10px" type="primary" icon="download" @click="handleExportXls"> 导出 </a-button>
      <a-table :columns="tableColumns" :data-source="tableData">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { getAction, downFile } from '@/api/manage'

export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    Trend,
    HeadInfo,
  },
  data() {
    return {
      tableColumns: [],
      tableData: [],
      loading: true,
      center: null,
      reportName: '',
      reportId: '',
      tableList: [],
      url: {
        executeGraphReport: '/online/api/executeGraphReport',
        exportXlsUrl: '/online/api/export/exportXlsGraphReport',
      },
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    //this.initLogInfo()
    this.initData()
  },
  watch: {
    $route() {
      // 刷新参数放到这里去触发，就可以刷新相同界面了
      this.initData()
        .then(() => {})
        .catch((msg) => {
          console.log(msg)
        })
    },
  },
  methods: {
    initData() {
      this.tableColumns = []
      //let index = this.$route.fullPath.indexOf('=') + 1
      //this.reportId = this.$route.fullPath.substring(index)
      this.reportId = this.$route.params.id
      getAction(this.url.executeGraphReport, { id: this.reportId }).then((res) => {
        this.reportName = res.result.reportName
        this.tableList = res.result.itemList
        this.tableData = res.result.itemList
        res.result.itemListKeyList.forEach((item) => {
          this.tableColumns.push({
            title: item,
            dataIndex: item,
          })
        })
      })
    },
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = { id: this.reportId }
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

/deep/ .ant-tabs-bar {
  display: none;
}
</style>